<template>
  <el-dialog
    :title="title"
    class="linedia"
    :close-on-click-modal="false"
    :visible.sync="syncLineDialog"
    :before-close="handleClosed"
    width="500px"
  >
    <el-form
      :model="privateLine"
      :rules="lineRules"
      ref="ruleForm"
      label-width="90px"
    >
      <el-form-item label="线路名称" prop="lineName" required>
        <el-input
          v-model="privateLine.lineName"
          maxlength="15"
          class="linedia__form--con"
        ></el-input>
      </el-form-item>
      <el-form-item label="司机名称" prop="lineDriver" required>
        <el-input
          v-model="privateLine.lineDriver"
          maxlength="6"
          class="linedia__form--con"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="linePhone" required>
        <el-input
          v-model="privateLine.linePhone"
          maxlength="11"
          class="linedia__form--con"
        ></el-input>
      </el-form-item>
      <el-form-item label="地区选择" prop="districtName" required>
        <div class="linedia__form--addr">
          <RegionSelect
            :value.sync="addrCodeList"
            @change="handleChange"
          ></RegionSelect>
        </div>
      </el-form-item>
      <div class="linedia__footer">
        <el-button
          @click="
            handleClosed(() => {
              syncLineDialog = false;
            })
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="savaData">确 定</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script lang="ts">
import address from "@/views/goods/common/city.js";
import {
  Vue,
  Component,
  Emit,
  Watch,
  PropSync,
  Ref,
} from "vue-property-decorator";
import RegionSelect from "@/components/RegionSelect/src/RegionSelect.vue";

@Component({
  components: { RegionSelect },
})
export default class LineDialog extends Vue {
  /** 佣金设置弹框 */
  @PropSync("lineDialog", { type: Boolean, default: false })
  syncLineDialog: boolean;

  @Ref("ruleForm")
  refRuleForm;

  privateLine = {
    /** 线路名称 */
    lineName: "",
    /** 线路司机名称 */
    lineDriver: "",
    /** 线路司机电话 */
    linePhone: "",
    /** 省id */
    provinceId: "",
    /** 省名称 */
    provinceName: "",
    /** 市id, */
    cityId: "",
    /** 市名称 */
    cityName: "",
    /** 区id */
    districtId: "",
    /** 区名称 */
    districtName: "",
    /** 主键id,新增不传,修改传原值 */
    lineId: "",
    /** 租户id  */
    tenantId: "",
    /** 城市合伙人id  */
    userId: "",
  };

  addressProv = address.getProvince();

  addressCity = [];

  addressArea = [];

  title = "添加线路";

  /** 省市区选择数组 */
  addrCodeList = [];

  @Emit("saveLineData")
  saveLineData() {
    return this.privateLine;
  }

  @Watch("syncLineDialog")
  syncLineDialogChange(val) {
    if (!val) {
      this.reasetData();
      this.refRuleForm.resetFields();
    }
  }

  /**
   * 重置数据
   */
  reasetData() {
    this.privateLine = {
      /** 线路名称 */
      lineName: "",
      /** 线路司机名称 */
      lineDriver: "",
      /** 线路司机电话 */
      linePhone: "",
      /** 省id */
      provinceId: "",
      /** 省名称 */
      provinceName: "",
      /** 市id, */
      cityId: "",
      /** 市名称 */
      cityName: "",
      /** 区id */
      districtId: "",
      /** 区名称 */
      districtName: "",
      /** 主键id,新增不传,修改传原值 */
      lineId: "",
      /** 租户id  */
      tenantId: "",
      /** 城市合伙人id  */
      userId: "",
    };
    this.addrCodeList = [];
  }

  /**
   * 检测电话号码
   */
  validatePhone = (rule, value, callback) => {
    const patrn = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
    if (value === "") {
      callback(new Error("请输入电话号码"));
    } else if (patrn.test(value)) {
      callback();
    } else {
      callback(new Error("手机号格式输入错误"));
    }
  };

  /** 校验规则 */
  lineRules = {
    lineName: [
      {
        required: true,
        message: "请输入线路名称",
        trigger: ["blur", "change"],
      },
    ],
    linePhone: [{ validator: this.validatePhone, trigger: ["blur", "change"] }],
    lineDriver: [
      {
        required: true,
        message: "请输入司机名称",
        trigger: ["blur", "change"],
      },
    ],
    districtName: [
      { required: true, message: "请选择地区", trigger: ["blur", "change"] },
    ],
  };

  /**
   * 关闭弹窗的回调
   */
  handleClosed(done) {
    this.title = "添加线路";
    this.reasetData();
    done();
  }

  /**
   * 编辑线路
   */
  editLine(data) {
    this.privateLine = {
      ...this.privateLine,
      ...data,
    };
    this.addrCodeList = [data.provinceId, data.cityId, data.districtId];
    this.title = "编辑线路";
  }

  /**
   * 省市区选择联动
   */
  handleChange(val) {
    this.privateLine = {
      ...this.privateLine,
      cityId: val.cityCode,
      cityName: val.cityName,
      districtId: val.districtCode,
      districtName: val.districtName,
      provinceId: val.provinceCode,
      provinceName: val.provinceName,
    };
    this.$nextTick(() => {
      this.refRuleForm.validateField("districtName");
    });
  }

  /**
   * 保存线路
   */
  savaData() {
    // 检测是否输入完成
    this.refRuleForm.validate(valid => {
      if (valid) {
        this.saveLineData();
      }
    });
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/logistics/pickPoint.scss";
</style>
